<!--
  发帖页面
  wdz
  2019年12月23日
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-live
        main-content(modularTitle="在线论坛")
        div.main-content-box
          p.main-content-title Online BBS
          el-row(:gutter="28")
            el-col(:span="16")
              el-card
                div(slot="header").card-title 论坛发帖
                div.forum-articlesBox(ref="postBox")
                  el-form(:model="formModel" :rules="rules" ref="formModel")
                    el-form-item(prop="title")
                      el-input.forumTxtInput(type="text" placeholder="请输入标题" v-model="formModel.title" maxlength="28" show-word-limit)
                    el-form-item(prop="themeValue")
                      el-select.forumTxtSelect(v-model="formModel.themeValue" placeholder="请选择主题分类")
                        el-option(v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled")
                    //TextEditor
                  TinyEditer(ref="editor" @query="onQueryChange").editor#editor
                  Upload(
                    :action="action"
                    v-on:filePath="getImgPath" fileType='img' list-type='picture'
                    btnText="插入图片" ref='imgUpload'
                  )
                  Upload(
                    :action="action"
                    v-on:filePath="getFilePath" fileType='file'
                    btnText="上传附件" ref='fileUpload'
                  )
                  large-file-upload(
                    :action="videoAction"
                    v-on:filePath="getVideoPath"
                    fileType='video'
                    btnText="上传视频"
                    ref='videoUpload'
                    btnType="text"
                  )
                  el-button.submit(type="primary" @click="submit('formModel')") 提交
            el-col(:span="8")
              el-card.form-card
                div(slot="header").card-title 热门帖子
                div(ref="popBox").popular-box
                  ul.popularUl
                    li.clearfix(v-for="(item, index) in popularList" @click="toForum(item)" v-show="index<10")
                      span.discSpan
                      span.popularTitle {{item.messageTitle}}
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'
  import {baseURL, videoURL, uploadFile} from '../../config/global.toml'
  import LargeFileUpload from '../../components/LargeFileUpload'

  export default {
    components: {
      LargeFileUpload,
      MainContent,
      NavMenu,
      TitleBg
    },
    name: 'ForumPost',
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        action: baseURL + '/camel/rest/upload', // 文件上传路径
        imgPathArr: [], // 上传图片数组
        filePathArr: [], // 上传文件数组
        videoPathArr: [], // 上传视频数组
        photo: '', // 图片数组字符串
        file: null, // 文件数组字符串
        popularList: [], // 热门列表
        options: [
          {
            value: '组织病理',
            label: '组织病理'
          }, {
            value: '细胞病理',
            label: '细胞病理'
          }
        ],
        identity: [],
        formModel: {
          title: '', // 帖子标题
          themeValue: ''
        },
        rules: { // 表单校验规则
          title: [{required: true, message: '请输入标题', trigger: 'blur'}],
          themeValue: [{required: true, message: '请选择主题', trigger: 'change'}]
        },
        query: '',
        videoAction: videoURL + '/upload'
      }
    },
    mounted() {
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.$refs.postBox.style.height = that.fullHeight - 278 - 42 + 'px' // 患者详情表单高度
            that.$refs.popBox.style.height = that.fullHeight - 278 - 42 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        that.$refs.postBox.style.height = that.fullHeight - 278 - 42 + 'px'// 患者详情表单高度
        that.$refs.popBox.style.height = that.fullHeight - 278 - 42 + 'px'// 患者详情表单高度
      })
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
      this.getPopular()
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    methods: {
      // 切换当前页
      handleCurrentChange(val) {
        console.log('当前页:', val)
        this.currentPage = val
      },
      // 获取上传图片
      getImgPath(filePath, fileName) {
        console.log('--getImgPath---', filePath)
        console.log('--ImgName---', fileName)
        this.imgPathArr.push(filePath)
        // this.fileNameArr.push(fileName)
      },
      // 获取上传文件
      getFilePath(filePath, fileName) {
        console.log('--getFilePath---', filePath)
        console.log('--fileName---', fileName)
        this.filePathArr.push(filePath)
        // this.fileNameArr.push(fileName)
      },
      // 发帖提交按钮
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.query === '') {
              this.$message.error('请输入帖子内容')
            } else {
              console.log(this.$refs.editor.tinymceHtml)
              this.submitBefore(data => {
                let content = this.$refs.editor.tinymceHtml
                this.$http.request({
                  method: 'POST',
                  url: '/camel/rest/telemedicine/messages/addMessage',
                  params: {
                    uid: this.identity[0].id,
                    userName: this.identity[0].name,
                    messageContent: content,
                    messageTitle: this.formModel.title,
                    photo: this.photo,
                    file: this.file,
                    headportrait: this.identity[0].icon,
                    identity: this.identity[0].identity,
                    theme: this.formModel.themeValue,
                    uploadVideo: this.videoPathArr.toString()
                  }
                }).then(res => {
                  this.$message({
                    message: '发帖成功',
                    type: 'success'
                  })
                  setTimeout(() => {
                    this.$refs.editor.tinymceHtml = ''
                    this.title = ''
                    this.$refs.imgUpload.clearFiles()
                    this.$refs.fileUpload.clearFiles()
                    this.$router.push({path: '/forum/index'})
                  }, 500)
                })
              })
            }
          }
        })
      },
      // 提交之前将上传的图片和文件分别转换为字符串提交后传入couchDB
      submitBefore(callBack) {
        console.log('===FilePath=================', this.filePathArr)
        let filePath = ''
        let imgPath = ''
        if (this.imgPathArr.length) {
          this.imgPathArr.forEach(e => {
            imgPath += e + ','
          })
          imgPath = imgPath.substr(0, imgPath.length - 1)
        }
        if (this.filePathArr.length) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        this.photo = imgPath
        this.file = filePath
        console.log(this.imgPathArr)
        console.log(this.filePathArr)
        callBack()
      },
      // 获取热门发帖
      getPopular() {
        this.$http.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/messages/getPopular' // 查询共有多少条帖子
        }).then(res => {
          let _data = res.data.data
          console.log('------Popular------', _data)
          this.popularList = _data
        })
      },
      // 根据帖子ID跳转详情页
      toForum(item) {
        this.$router.push({path: '/forum/forumDetails', query: {forumId: item.id}})
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/messages/getbrowsenum',
          params: {
            id: item.id
          }
        }).then(res => {
        })
      },
      onQueryChange(query) {
        console.log('------query------', query)
        this.query = query
      },
      // 获取视频上传返回路径数组
      getVideoPath(filePath, fileName) {
        console.log('---getVideoPath---', filePath)
        console.log('---VideoName---', fileName)
        this.videoPathArr.push(uploadFile + '/' + fileName)
        console.log(this.videoPathArr)
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-live
    margin-left 27px
    padding 0

  .main-live .main-content-box
    padding-right 27px
    margin-top 28px
    overflow-y auto
    overflow-x hidden

  .main-live .main-content-box .main-content-title
    color #a2c8f8
    font-size 14px

  .main-live .main-content-box .el-card
    margin-top: 25px

  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .el-main
    padding 0 20px

  .card-title
    font-size 16px

  .textMessage-information
    color #999
    height 28px
    line-height 28px
    font-size 14px

  .textMessage-information .carveUp
    margin 0 5px

  .el-pagination
    margin-top 20px
    text-align center

  .popularUl li
    font-size 14px
    color #676767
    line-height 61px
    height 61px
    white-space nowrap
    padding 0 30px

  .popularUl li:nth-child(even)
    background-color #f2f2f2

  .discSpan
    width 8px
    height 8px
    float left
    background-color #b7b8ba
    border-radius 50%
    margin 26px 20px 26px 0

  .popularTitle
    float left
    width 90%
    overflow hidden
    text-overflow ellipsis
    cursor pointer

  .popularTitle:hover
    color #1572e9

  .blueBtn
    float right
    line-height 28px
    padding 0 16px
    border-radius 17px
    margin-top -5px
    border-color #6bbbfa
    color #6bbbfa

  .blueBtn:hover
    background-color #6bbbfa
    color #fff

  /*发帖*/
  .forumTxtSelect
    width 100%

  .post-box
    padding-right 20px
    overflow auto

  .forum-articlesBox
    overflow auto

  .popular-box
    overflow auto

  .submit
    margin-top 10px
</style>
